<template>
  <div class="workbench-wrapper">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container" >

          <div class="cardTable">
            <div class="header">
                <div class="gap-top">
                    <mds-tag v-for="(item,index) in tagList" :key="index" :color="item.color">{{item.name}}</mds-tag>

                </div>
            </div>
            <div class="cardBox">
            <mds-card class="mds-card" style="padding:24px;" :bodyStyle="bodyStyle">
                <div class="addBox">
                    <mds-icon type="plus" />
                    <span>添加内容</span>
                </div>
            </mds-card>
            <mds-card v-for="(item,index) in cardlist" :key="index" class="mds-card"  :bodyStyle="bodyStyle">
                <div class="custom-image" :style="item.backColor">
                    <div class="imgbox">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="textBox">
                        <span class="title">{{item.title}}</span>
                        <div class="discraption">{{item.discraption}}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="handleBox">
                    <span class="time">{{item.time}}</span>
                    <div class="iconBox">
                        <mds-icon type="line-bell" />
                        <mds-icon type="line-download" />
                        <mds-icon type="line-ellipsis" />
                    </div>
                </div>
            </mds-card>
             </div>
        </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'

export default {
  data() {
    return {
      tagList: [
        {
          color: 'blue',
          name: '图文操作'
        }, {
          color: '#666',
          name: '话机'
        }, {
          color: '#666',
          name: '网络'
        }, {
          color: '#666',
          name: '电脑'
        }, {
          color: '#666',
          name: '视频会议'
        }, {
          color: '#666',
          name: '邮箱'
        }, {
          color: '#666',
          name: '打印机'
        }
      ],
      cardlist: [{
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }, {
        img: '',
        title: '图片型卡片标题',
        discraption: '说明：这里可以放两行描述文字，超出文字字数则显示…',
        time: '2016-12-12'
      }],
      bodyStyle: {
        padding: '0',
        height: '100%'
      }
    }
  },
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  }
}
</script>
<style lang="scss" scoped>
    .cardTable{
         background: #EEF0F3;
          display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
             .header{
                background: #EEF0F3;
                position: absolute;
                /* margin-top: -30px; */
                top: 46px;
                width: 100%;
                left: 0;
                background: white;
                padding: 19px 24px 5px 24px;
                z-index: 9999;
            }
            .cardBox{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                height: 100%;
                padding-top: 70px;
            .mds-card{
                width:369px;
                height:162px;
                background:rgba(255,255,255,1);
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.04);
                display: flex;
                flex-direction: column;
                margin:0 16px 16px 0;
                .custom-image{
                    display: flex;
                    flex-direction: row;
                    padding: 20px 24px 16px 24px;
                    .imgbox{
                        width:80px;
                        height:70px;
                        background:rgba(225,233,252,1);
                    }
                    .textBox{
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        margin-left: 16px;
                        .title{
                            font-size:16px;
                            font-family:PingFangSC-Medium,PingFang SC;
                            font-weight:500;
                            color:rgba(53,64,82,1);
                            line-height:24px;
                            text-align: start;
                            margin-bottom: 6px;
                        }
                        .discraption{

                            font-size:14px;
                            font-family:PingFangSC-Regular,PingFang SC;
                            font-weight:400;
                            color:rgba(127,143,164,1);
                            line-height:22px;
                            text-align: start;
                        }
                    }
                }
                .line{
                    // width:370px;
                    height:1px;
                    background:rgba(240,242,245,1);
                }
                .handleBox{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 13px 17px 14px 17px;
                    .time{
                        font-size:14px;
                        font-family:PingFangSC-Regular,PingFang SC;
                        font-weight:400;
                        color:rgba(127,143,164,1);
                        line-height:22px;
                    }
                    .iconBox{
                        i{
                            margin-left: 24px;
                        }
                    }
                }
            }
            .addBox{
                height: 100%;
                border:1px solid rgba(202,210,221,1);
                // margin: 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size:14px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(127,143,164,1);
                line-height:22px;
            }
        }
    }
</style>
